<template>
  <div class="header-bread-layout hor-layout-center">
    <i class="fold-icon" :class="foldIconClass" @click="collapseSideMenuAction()"></i>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="flex: 1">
      <el-breadcrumb-item v-for="(item,index) in routeFullPath" :to="{ path: item.path }" :key="index">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown class="header-user-info-layout" @command="userInfoClick">
      <div class="header-user-info hor-layout-center">
        <img src="../../assets/logo.png">
        <div class="header-user-info-text">Admin</div>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {RoutesMenu} from "../../router/routes-menu"
import {loginPage} from "../../router/pages"
import {mapState} from "vuex";

export default {
  name: "header-breadcrumb",
  data() {
    return {}
  },
  computed: {
    ...mapState(['collapseSideMenu']),
    routeInfo() {
      return this.$route.meta
    },
    routeFullPath() {
      return this.getFullPath(RoutesMenu, this.$route.path)
    },
    foldIconClass() {
      return this.collapseSideMenu ? "el-icon-s-unfold" : "el-icon-s-fold"
    }
  },
  methods: {
    userInfoClick(command) {
      if (command == 'exit') {

        this.$router.replace(loginPage)
      }
    },
    getFullPath(list, path, pathList = []) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].path == path) return [...pathList, list[i]]
        else if (list[i].children && this.getFullPath(list[i].children, path))
          return this.getFullPath(list[i].children, path, [...pathList, list[i]])
      }
      return null
    },
    collapseSideMenuAction() {
      this.$store.commit("setCollapseSideMenu", !this.collapseSideMenu)
    }
  }
}
</script>

<style scoped>
.header-bread-layout {
  height: 50px;
  border-bottom: 1px solid #e2e8f0;
}

.fold-icon {
  height: 50px;
  line-height: 50px;
  padding: 0px 15px;
  font-size: 21px;
}

.fold-icon:hover {
  background: #edf2f7;
}

.header-user-info-layout {
  height: 50px;
}

.header-user-info {
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.header-user-info:hover {
  background: #edf2f7;
}

.header-user-info > img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #a6c4cf;
}

.header-user-info-text {
  margin-left: 8px;
}
</style>
